<template>
  <div>
    <div>产品:{{ prodocts }}</div>
    <div>价格:{{ prodoctPrice }}</div>
    <div>数量:{{ prodoctNum }}</div>
    <button @click="addProduct">加一</button>
    <div>总价:{{ totalPrice }}</div>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapState } from "vuex";
export default {
  methods: {
    ...mapMutations(["addProduct"]),
  },
  computed: {
    ...mapGetters(["totalPrice"]),
    ...mapState(["prodocts", "prodoctPrice", "prodoctNum"]),
  },
};
</script>

<style>
button {
  background-color: red;
}
</style>